<template>
  <div>
     <template v-if="item.children&&item.children.length>0">
        <el-submenu :index="item.component">
            <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.name}}</span>
            </template>
            <aside-menu-item v-for="subItem in item.children" :key="subItem.component" :item="subItem"></aside-menu-item>
        </el-submenu>
     </template>
     <template v-else>
        <el-menu-item :index="item.component">
            <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.name}}</span>
            </template>
        </el-menu-item>
     </template>
  </div>
</template>

<script>
export default {
    props:['item']
}
</script>

<style>
 .el-menu--collapse  .el-submenu__title span{
    display: none;
  }
  /*隐藏 > */
  .el-menu--collapse  .el-submenu__title .el-submenu__icon-arrow{
    display: none;
  }

</style>